<script setup>
import Request from '@/api/axios'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { PlusCircleTwoTone } from '@ant-design/icons-vue'
import fileAddFilled from '@ant-design/icons-vue/lib/icons/FileAddFilled.js'

const router = useRouter()
const ContestList = ref([])
onMounted(async () => {
    await Request.get({ url: `/contest/list` }).then((res) => {
        ContestList.value = res.info
    })
})
const percentage = (start, duration) => {
    let now = dayjs()
    let elapsedTimeInSeconds = now.diff(start)
    let total = dayjs(start).add(duration, 'minute') - now
    if (elapsedTimeInSeconds < 0) return 0
    if (elapsedTimeInSeconds > total) return 100
    return total * 10 / elapsedTimeInSeconds
}
const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        width: 180
    },
    {
        title: '介绍',
        dataIndex: 'introduction',
        key: 'introduction',
        width: 180
    },
    {
        title: '总提交数',
        dataIndex: 'submission',
        key: 'submission',
        width: 100
    },
    {
        title: '总通过数',
        dataIndex: 'accept',
        key: 'accept',
        width: 100
    },
    {
        title: '开始时间',
        dataIndex: 'begin_at',
        key: 'begin_at',
        width: 250
    },
    {
        title: '截止时间',
        key: 'end_at',
        width: 250
    },
    {
        title: '进度',
        key: 'progress'
    }
]
</script>

<template>
    <a-table :data-source="ContestList" :columns="columns" stripe class="w-full">
        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'begin_at'">
                {{ dayjs(record.begin_at).format('YYYY/MM/DD HH:mm:ss') }}
            </template>
            <template v-else-if="column.key === 'title'">
                <a-button
                    type="link"
                    @click="router.push({name : 'contest', params : { id : record.id }})"
                    class="hover-link"
                    >{{ record.title }}
                </a-button>
            </template>
            <template v-else-if="column.key === 'end_at'">
                {{
                    dayjs(record.begin_at)
                        .add(record.duration, 'minute')
                        .format('YYYY-MM-DD HH:mm:ss')
                }}
            </template>
            <template v-else-if="column.key === 'progress'">
                <a-progress
                    :stroke-width="10"
                    :percent="percentage(record.begin_at, record.duration)"
                    :show-info="false"
                />
            </template>
        </template>
    </a-table>
</template>

<style scoped>
.hover-link {
    color: #000000;
}
</style>
